<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>

        .static{
            width:150px;
            height:150px;
            text-align: center;
            line-height: 150px;
        }
        .a{
            background: red;
        }
        .b{
            border:3px solid blue;
        }
        .c{
            border-radius: 50%;
        }
        .main{
            width:420px;
            overflow: hidden;
            padding: 20px 10px;
            box-sizing: border-box;
            background: #f4f4f4;
            border-radius: 10px;
            height:420px;
            display: flex;
            flex-direction: column;
        }
        .nav{
            width:100%;
            display: flex;
            justify-content: space-between;
        }
        .nav-item{
            width:120px;
            height:40px;
            background: brown;
            border-radius: 6px;
            color:#fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .nav .active{
            background: #0f0;
            color:crimson;
            font-size: 20px;
        }
        .content{
            flex:1;
            width:100%;
            margin-top:20px;
            overflow: hidden;
        }
        .content-item{
            width:100%;
            height:100%;
            border-radius: 6px;
            background: darkmagenta;
            color:#fff;
            font-size: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        tr td{
            border:1px solid #ddd;  
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 :data-title="msg">{{msg}}</h2>
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>选择</td>
                    <td>商品名称</td>
                    <td>商品图片</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody v-if="goods.length>0">
                <tr v-for="(l,i) in goods" :key="i">
                    <td> {{i+1}}</td>
                    <td>
                        <input type="checkbox" v-model="l.check" >
                    </td>
                    <td>
                        {{l.title}}
                    </td>
                    <td><img src="http://47.104.209.44/base/img/3.jpg" width="100" height="70" alt=""></td>
                    <td>
                        {{l.price }} 元
                    </td>
                    <td>
                        <input type="number" v-model.number="l.count" style="width:40px;">
                    </td>
                    <td>
                        {{l.price * l.count}}
                    </td>
                    <td>
                        <button @click="goods.splice(i,1)">删除</button>
                    </td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="8" style="text-align:center">
                        暂无购物车数据
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <label for="quan">
                <input id="quan" type="checkbox" v-model="quan"> 全选反选
            </label>
            <button @click="delCheck">批量删除</button>
            <div>
                总数量  :  {{total}}   /  {{alltotal}}
                总价值 :  {{amount}}元
            </div>
            <div>
                选择数量 :  {{checkTotal}}  /
                选择总价: {{checkAmount}} 元
            </div>
            <div>
                <button>去结算({{checkAmount}})</button>
            </div>
        </div>
    </div>
    <script>



        const vm = new Vue({
            data:{
                msg:"Vue 实现简易的购物车 ",
                goods:[
                    {check:false,title:"上衣",price:200,count:10},
                    {check:true,title:"裤子",price:100,count:10},
                    {check:false,title:"鞋子",price:500,count:10},
                    {check:false,title:"风衣",price:1000,count:10},
                    {check:true,title:"帽子",price:300,count:10},
                    {check:true,title:"西服",price:2000,count:10},
                ],
                total:0,
                checkTotal:0,
                amount:0,
                checkAmount:0
            },
            watch:{
                // goods(v){
                //     console.log(v)
                // }
                goods:{  // Vue 深度监听 
                    deep:true,
                    handler(v){
                        console.log(v)
                        this.total = 0;
                        this.checkTotal = 0
                        this.amount = 0;
                        this.checkAmount = 0;
                        v.forEach(item=>{
                            if(item.check){
                                this.checkTotal += item.count;
                                this.checkAmount += item.count * item.price 
                            }
                            this.total += item.count
                            this.amount += item.count * item.price 
                        })
                    }
                }
            },
            computed:{
                alltotal(){
                    var all = 0;
                    this.goods.forEach(item=>{
                        all += item.count ;
                    })
                    return all ;
                },
                quan:{
                    get(){
                        return this.goods.every(item=>item.check)
                        // var flag = true;
                        // this.goods.forEach(item=>{
                        //     if(!item.check){
                        //         flag = false 
                        //     }
                        // })
                        // return flag ;
                    },
                    set(v){
                        this.goods = this.goods.map(item=>{
                            // item.check  = v;
                            // return v;

                            // item = {...item,check:v}
                            // return v;
                            return {...item,check:v}
                        })
                    }
                }
            },
            methods:{
                delCheck(){
                    // filter true 保留下来 false 筛选出去 
                    this.goods = this.goods.filter(item=>!item.check);
                }
            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
                this.goods.forEach(item=>{
                    if(item.check){
                        this.checkTotal += item.count;
                        this.checkAmount += item.count * item.price 
                    }
                    this.total += item.count
                    this.amount += item.count * item.price 
                })
            }
        }).$mount("#app")


       

    </script>

</body>
</html>